<template>
  <panel title="账号列表">
    <div class="list">
      <el-table ref="accList" :data="accList" tooltip-effect="dark" @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="账号" prop="account"> </el-table-column>
        <el-table-column prop="userGroup" label="用户组"> </el-table-column>
        <el-table-column label="创建时间" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.ctiem | formatData }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="(dialogFormVisible = true), list(scope.row)">
              编辑
            </el-button>
            <!-- 编辑对话框 -->
            <el-button size="mini" type="danger" @click="open(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination :current-page="params.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="pageChange"
          @size-change="sizeChange">
        </el-pagination>
      </div>
      <div style="margin-top: 20px">
        <el-button type="danger" @click="removes()">批量删除</el-button>
        <el-button type="primary" @click="toggleSelection()">
          取消选择
        </el-button>
      </div>
    </div>
    <el-dialog title="修改账号" :visible.sync="dialogFormVisible">
      <AccountForm @cancel="cancel" type="edit" :defaultForm="accEdit" @success="success"></AccountForm>
    </el-dialog>
  </panel>
</template>

<script>
// import axios from "@/utils/requests";
import dayjs from "dayjs";
import { accDel, accDels, accEdit, accList, userRevise } from '@/api/account.api';
import AccountForm from "./components/AccountForm.vue";

export default {
  components: { AccountForm },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      // 请求接口的对象
      params: {
        currentPage: 1,
        pageSize: 5,
      },
      total: null,
      accList: [],
      accEdit: {
        account: "",
        userGroup: "",
        id: null
      },
      revises: {},
      sels: [],
      multipleSelection: [],
    };
  },
  methods: {
    // 修改账号列表
    success(addInfo) {
      accEdit(addInfo).then(res => {
        if (res.data.code === 0) {
          this.dialogFormVisible = false
          this.$message.success(res.data.msg)
          this.accountList()
        }
      })
    },

    cancel(cancel) {
      this.dialogFormVisible = cancel
    },
    // 封装axios
    async accountList() {
      const res = await accList(this.params);
      this.accList = res.data.data;
      this.total = res.data.total;
    },
    // 分页设置
    pageChange(currentPage) {
      this.params.currentPage = currentPage;
      this.accountList();
    },
    // 一页的数据的数量
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.accountList();
    },
    // 编辑表格数据的函数
    async list(row) {
      this.accEdit = row;
      // const res = await accEdit(this.accEdit);
    },
    // 修改账号的接口
    async revise() {
      this.revises = this.accEdit;
      const res = await userRevise(this.revises);
      if (res.data.code === 0) {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.accountList();
      }
    },
    // 获取表格选中的值
    handleSelectionChange(val) {
      this.sels = val;
      // console.log(this.sels);
    },
    // 批量删除的函数
    removes() {
      this.$confirm("此操作将永久删除该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(async () => {
        const res = await accDels(JSON.stringify(this.sels.map(item => item.id)));
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
        }
        this.accountList();
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    // 取消选择按钮
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.accList.toggleRowSelection(row);
        });
      }
      else {
        this.$refs.accList.clearSelection();
      }
    },
    // 删除账号的函数
    open(id) {
      this.$confirm("此操作将永久删除该账号, 是否继续?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          accDel(id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.accountList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  // 一进页面调用接口
  created() {
    this.accountList();
  },
  filters: {
    // 处理日期的函数
    formatData(ctiem) {
      return dayjs(ctiem).format("YYYY/MM/DD");
    }
  },
};
</script>

<style lang="less" scoped>
.page {
  margin-top: 20px;
}

.list {

  .el-button {
    margin-left: 10px;
  }
}
</style>